<template>
    <div class="user">
        <el-form :inline="true" :model="search">
            <el-row>
                <el-col :span="24" style="display: flex">
                    <el-form-item label="操作类型">
                        <el-select v-model="search.operateType" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="search.userName" placeholder="请输入用户名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button plain @click="onReset">清空</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table ref="multipleTable" :data="tableData" stripe border style="width: 100%">
            <el-table-column prop="operateType_text" label="操作">
            </el-table-column>
            <el-table-column prop="description" label="操作描述">
            </el-table-column>
            <el-table-column prop="dataId" label="操作数据Id">
            </el-table-column>
            <el-table-column prop="userName" label="操作用户">
            </el-table-column>
            <el-table-column prop="clientIp" label="IP地址">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[10, 50, 100, 200]" :page-size="search.size"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>


<script>

import { commonApi } from "../../api/api";
import tables from "@/utils/tables";
import form from "@/utils/form";

export default {
    mixins: [
        tables, form
    ],
    data() {
        return {
            tableData: [],
            total: 0,
            search: {
                operateType: '',
                userName: '',
                size: 10,
                current: 1
            },
            options: [{
                value: 1,
                label: '登陆'
            }, {
                value: 2,
                label: '查看'
            }, {
                value: 3,
                label: '编辑'
            }, {
                value: 4,
                label: '删除'
            }, {
                value: 5,
                label: '新增'
            }]
        }
    },
    created() {
        this.onSubmit();
    },
    methods: {
        onSubmit() {
            commonApi.page("operateLog", this.search).then(res => {
                this.loadPage(res, ['operateType'])
            }
            )
        }
    }
}
</script>

<style lang="scss" scoped>
.user {


    .block {
        margin: 20px;
        float: right;
    }

}
</style>